<template>
  <aside class="btn-box">
    <el-row :gutter="10">
      <el-col :span="2.5">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="addNewUser">新增账户</el-button>
        <user-info ref="userInfo" @reloadFun="reloadFun" />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="search">检索</el-button>
        <search-dialog ref="search" @searchFun="searchFun" />
      </el-col>
    </el-row>
  </aside>
</template>

<script>
import userInfo from './user-info'
import searchDialog from './search'
export default {
  components: {
    userInfo,
    searchDialog
  },
  methods: {
    addNewUser() {
      this.$refs['userInfo'].dialogFormVisible = true
    },
    search() {
      this.$refs['search'].dialogFormVisible = true
    },
    reloadFun() {
      this.$emit('reloadFun')
    },
    searchFun(val) {
      console.log(val)
      this.$emit('searchFun', val)
    }
  }
}
</script>

<style lang="scss" scoped>
 .el-button {
   width: 100%;
 }
</style>
